<template>
    <div class="body">
        <img :src="loginBackground" class="login-background"/>
        <div class="login-box">
            <p class="loginM-msg">请登录</p>
            <h2 class="login-title">门户网站后台管理</h2>
            <login-box></login-box>
        </div>
    </div>
</template>

<script>
    import LoginBox from "./common/LoginBox";
    import paramApi from '@/api/param/paramApi'
    export default {
        name: "Login.vue",
        components:{
            LoginBox
        },
        data(){
            return{
                loginBackground:'',
            }
        },
        created:async function () {
            let res = await paramApi.getByKey("loginBackground")
            if (res.code == '200'){
                this.loginBackground = res.data.paramValue
            }else {
                this.$message.error(res.msg)
            }
        }
    }
</script>

<style scoped>
    .body{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .login-background{
        width: 100%;
        height: 100%;
    }
    .login-box{
        position: absolute;
        width: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 30px;
        background: rgba(255,255,255,0.5);
        box-shadow: 5px 5px 15px #000000;
        text-align: center;
    }
    .loginM-msg{
        color: gray;
    }
    .login-title{
        margin:20px 0px;
        letter-spacing: 5px;
        color: #58696d;
    }

</style>